// 这里采用的是路由的组件写法

import {HashRouter,Route,Switch,Redirect} from "react-router-dom"
import React from 'react'
// 引入路由组件
import Login from '../views/Login/login'
import NewsSandBox from "../views/NewsSandBox/NewsSandBox"
import News from '../views/News/News'
import Detail from '../views/News/Detail'

export default function indexRouter() {
  return (
    // HashRouter 是采用HashRouter路由模式，这种模式下，浏览器路由路径中会包含 # 符号
    <HashRouter>
        {/* Switch是用于开启路由的严格匹配模式，一般来说路由路径匹配到了第一个还会继续往下找还有没有能够相匹配的，而使用了 Switch 后，路由路径匹配到了第一个就不会继续往下匹配了 */}
        <Switch>
            {/* 下面两条路由路径是在项目中是一级路由，分别对应 登录页面 和登录成功后的 主页 */}

            <Route path="/login" component={Login}/>
            <Route path="/news" component={News}/>
            <Route path="/detail/:id" component={Detail}/>
            {/* <Route path="/" component={NewsSandBox}/> */}
            {/* 以下这种Route写法效果和上面一样，下面就是当路由路径匹配的时候，使用render将指定的组件渲染出来，下面这种写法可以应对多种情况 */}
            <Route path="/" render={()=>{
                // 这里是利用三元运算符，如果本地存储中有token值，那么就渲染NewsSandBox组件，如果没有，那么就重定向到 /login 路由路径
                return localStorage.getItem("token") ? <NewsSandBox></NewsSandBox> : <Redirect to="/login" />
                // Redirect 的作用是重定向路由路径，在6版本的react-router-dom中，Redirect被useNavigate替代了
            }}/>
        </Switch>
    </HashRouter>
  )
}


